<template>
  <section class="flow-path-card condition" @click="handleEdit">
    <header class="header">
      <div class="title-box">
        <Share class="iconfont"/>
        <span class="title-text">{{ conf.properties.title }}</span>
        <input v-model="conf.properties.title" class="title-input" @click="stopPro"/>
      </div>
      <span class="priority">优先级{{ conf.properties.priority + 1 }}</span>
    </header>
    <div class="body">
      <pre class="text">{{ conf.content }}</pre>
    </div>
    <div class="icon-wrapper left" @click.stop.prevent="handleIncreasePriority">
      <el-icon class="left-arrow">
        <ArrowLeft/>
      </el-icon>
    </div>
    <div class="icon-wrapper right" @click.stop.prevent="handleDecreasePriority">
      <el-icon class="right-arrow">
        <ArrowRight/>
      </el-icon>
    </div>
    <NodeInfo :conf="conf"/>
  </section>
</template>
<script setup>
import {ElIcon} from 'element-plus';
import {
  Close,
  ArrowLeft,
  ArrowRight
} from '@element-plus/icons-vue';
import {stopPro} from './util.js';
import {unFormatDefaultValueByType} from "@/views/flow/tool.js";
import NodeInfo from "@/views/flow/createDirectly/Process/FlowCard/NodeInfo.vue";
const props = defineProps({
  conf: {
    type: Object,
    default: () => undefined
  },
  prevData: {
    type: Object,
    default: () => undefined
  },
  eventLancher: {
    type: Function,
    required: true
  }
});
const emits = defineEmits(['edit',
  'deleteNode',
  'increasePriority',
  'decreasePriority']);
const handleEdit = () => {
  props.eventLancher('edit',
      props.conf);
};
const handleIncreasePriority = () => {
  props.eventLancher('increasePriority',
      props.conf,
      props.prevData);
};
const handleDecreasePriority = () => {
  props.eventLancher('decreasePriority',
      props.conf,
      props.prevData);
};
</script>
<style scoped lang="scss">
@import "@/assets/styles/variables.module";
.flow-path-card.condition {
  .icon-wrapper {

    color: $conditionCard;
    position: absolute;
    top: 0;
    height: 100%;
    width: 14px;
    box-sizing: border-box;
    background: #FFFFFF60;
    opacity: 0;
    &:hover{
      opacity: 1;
    }

    &.left {
      left: 0;
      height: 100%;

    }

    &.right {
      right: 0;
      height: 100%;

    }

    > .right-arrow, .left-arrow {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

    }
  }
}
</style>
